<template>
  <div class="commet-box">
    <h3>发表评论</h3>
    <hr />
    <van-button type="info" @click="addcomm">添加评论</van-button>
    <van-cell-group>
      <van-field
        v-model="message"
        rows="5"
        autosize
        clearable
        maxlength="150"
        type="textarea"
        placeholder="请输入留言"
      />
    </van-cell-group>
    <div class="content-box" v-for="(item, i) in commontInfo" :key="item.id">
      <div class="title">
        <span>第{{ i + 1 }}楼</span>
        <span>用户:{{ item.user_name }}</span>
        <span>发表时间{{ item.add_time | dateFormat }}</span>
      </div>
      <div class="content-body">{{ item.content }}</div>
    </div>
    <van-button plain type="danger" @click="getmearn">加载更多</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      commontInfo: [],
      pageindex: 1,
      id: this.$route.params.id
    }
  },
  created() {
    this.commontinfo()
  },
  methods: {
    async addcomm() {
      if (this.message.trim().length === 0) {
        return this.$dialog.alert({
          message: '评论内容为空!!!'
        })
      }

      const { data: res } = await this.$http.post(
        '/api/postcomment/' + this.$route.params.id,
        { content: this.message.trim() }
      )
      if (res.status !== 0) {
        return this.$notify('添加评论失败')
      }
      this.$notify('添加评论成功')
      this.message = ''
    },
    // 获取评论
    async commontinfo() {
      const { data: res } = await this.$http.get(
        'api/getcomments/' + this.id + '?pageindex=' + this.pageindex
      )
      if (res.status === 0) {
        this.commontInfo = this.commontInfo.concat(res.message)
      }
    },
    // 点击加载更多
    getmearn() {
      this.pageindex++
      this.commontinfo()
    }
  }
}
</script>

<style lang="less" scoped>
.commet-box {
  .content-box {
    .title {
      height: 30px;
      line-height: 30px;
      background: #ccc;
      font-size: 13px;
    }
    .content-body {
      height: 35px;
      line-height: 35px;
    }
  }

  .van-button {
    width: 100%;
  }
}
</style>
